<template>
  <div class="aviation-container" v-if="isMounted">
    <!-- banner  -->
    <AviationDetailBanner :stuList="danmus" :data="data"></AviationDetailBanner>
    <!-- content -->
    <div class="aviation-detail-content" style="background: #f5f8fa">
      <Container
        class="avaiation-defailt-content-container"
        padding-top="2.5vw"
      >
        <div class="content">
          <div class="left">
            <AviationDetailLeft :data="data"></AviationDetailLeft>
          </div>
          <div class="right">
            <AviationDetailRight
              :danmus="danmus"
              :data="data"
            ></AviationDetailRight>
          </div>
        </div>
      </Container>
    </div>
  </div>
</template>

<script setup lang="ts">
import { nextTick, onBeforeMount, onMounted, provide, ref } from "vue";
import { useRoute } from "vue-router";
import { postCourseDetail } from "../../../api/aviation";
import { MemberHonor } from "../../../api/talent";

const isMounted = ref(false);

onMounted(async () => {
  await nextTick()
  isMounted.value = true;
})


const route = useRoute();
let data: any = ref();

let loaded = ref(false);
provide("loaded", loaded);

const handleBrandPic = (brandList?: Array<Object>) => {
  const len = brandList?.length;
  if (len == 0 || len == undefined) return;
  const MaxRow = 3; // 最大展示行
  const MaxLine = 6; // 最大展示列
  const CalcRowMax = Math.min(Math.ceil(len / MaxLine), MaxRow); // 计算获取到的图片最大展示行
  let brands: any = [];
  let idx = 0;
  for (const prop of brandList!) {
    if (Math.floor(idx / MaxLine) >= CalcRowMax) break;
    if (idx % MaxLine == 0) {
      brands.push([prop]);
    } else {
      brands[Math.floor(idx / MaxLine)].push(prop);
    }
    ++idx;
  }
  danmus.value = brands;
};

// 获取学院荣誉列表
const danmus = ref();
const getHonorList = async () => {
  const res = await MemberHonor();
  if (res.code == 200) {
    danmus.value = res.data || [];
    handleBrandPic(res.data);
  }
};

const postAviationDetailData = async () => {
  let id = route.query.id;
  if (!id) return history.go(-1);
  let res = await postCourseDetail(id).catch((error) => {
    history.go(-1);
  });
  if (res.code === 200) {
    data.value = res.data; 
  }
};



onBeforeMount(async () => {
  loaded.value = false;
  await postAviationDetailData();
  await getHonorList();
  loaded.value = true;
});
</script>
<style scoped lang="less">
.content {
  display: flex;
  gap: 24px;
  .left {
    flex: 1;
    min-width: 1px;
  }
  .right {
    width: 344px;
  }
}
@media screen and (max-width: 768px) {
  .aviation-container {
    background-color: rgb(245, 248, 250);
  }
  .aviation-detail-content {
    background-color: #fff !important;
  }
  .content {
    flex-direction: column;
    gap: 0;
    .divider-line {
      display: block;
      margin-bottom: 0;
      margin-top: 164px !important;
    }
    .right {
      width: 100%;
      display: none;
    }
  }
}
</style>
